<template>
	<view>
		
		<!-- 步骤导航 -->
		<view class="grace-steps" style="margin-top:25upx; margin-left: 20upx;">
			<view class="step current">
				<view class="step-circle">1</view>
				<view class="step-content">
					<view class="step-title">完善信息</view>
				</view>
			</view>
			<view class="step">
				<view class="step-circle">2</view>
				<view class="step-content">
					<view class="step-title">学者认领</view>
				</view>
			</view>
			<view class="step">
				<view class="step-circle">3</view>
				<view class="step-content">
					<view class="step-title">认领完成</view>
				</view>
			</view>
		</view>
		
		<!-- 步骤内容 -->
		<form @submit="formSubmit">
			<view class="grace-left-padding-wrap">
				<label class="grace-list">
					<text class="grace-list-text">真实姓名</text>
					<view>
						<input type="text" name="realName" placeholder="填写真实姓名"/>
					</view>
				</label>
				<label class="grace-list">
					<text class="grace-list-text">当前单位/院校</text>
					<view>
						<input type="text" name="workUnitCurrent" placeholder="填写真实信息"/>
					</view>
				</label>
				<label class="grace-list">
					<text class="grace-list-text">原工作单位/院校</text>
					<textarea name="workUnitFormer" placeholder="填写发文时的单位名称，系统将全面匹配您的所有成果。示例:北京大学;清华大学"></textarea>
				</label>	
				<picker mode="selector" name="education" :range="educationList" @change="bindEducationChange">
				<label class="grace-list">
					<text class="grace-list-text">最高学历</text>
					<view>
						<view class="placehol" v-if="education==''">有助于提升您的学术影响力</view>
						{{education}}
					</view>
				</label>
				</picker>	
				<picker mode="selector" name="professional" :range="professionalList" @change="bindProfessionalChange">
				<label class="grace-list">
					<text class="grace-list-text">职称</text>
					<view>
						<view class="placehol" v-if="professional==''">让您的学术履历锦上添花</view>
						{{professional}}
					</view>
				</label>
				</picker>	
				<label class="grace-list">
					<text class="grace-list-text">感兴趣的主题</text>
					<textarea name="favouriteSubject" placeholder="您将收到更多想要的信息，遇到更多同道中人。示例:计算机技术;人工智能;石墨烯"></textarea>
				</label>									
			</view>
			
			<view class="table-btn-view">
				<button type="warn" formType="submit" class="save-btn">下一步</button>
			</view>
			
		</form>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},		
		data() {
			return {
				educationList: ['博士研究生', '硕士研究生', '本科', '大专', '其他'],
				education: '',
				professionalList: ['正高级','副高级','中级','初级','其他'],
				professional: ''
			};
		},
		methods:{
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),			
			bindEducationChange: function(e) {
				this.education = this.educationList[e.target.value];
			},
			bindProfessionalChange: function(e) {
				this.professional = this.professionalList[e.target.value];
			},
			formSubmit: function(e){
// 				uni.navigateTo({
// 					url: '../../my/claim-step2/claim-step2'
// 				})
				//console.log(e.detail.value);
				var obj = e.detail.value;
				if(obj.realName==''){
					uni.showToast({
						title:'真实姓名不能为空',
						icon: 'none'
					})
					return;
				}
				if(obj.workUnitCurrent==''){
					uni.showToast({
						title:'当前单位不能为空',
						icon: 'none'
					})
					return;
				}
				if(obj.education==''){
					uni.showToast({
						title:'最高学历不能为空',
						icon: 'none'
					})
					return;
				}
				if(obj.professional==''){
					uni.showToast({
						title:'职称不能为空',
						icon: 'none'
					})
					return;
				}																
				var data  = {
					"username": this.userInfo.username,
					"realName": obj.realName,
					"workUnitCurrent": obj.workUnitCurrent,
					"workUnitFormer": obj.workUnitFormer,
					"education": this.education,
					"professional": this.professional,
					"favouriteSubject": obj.favouriteSubject

				}			
				this.saveUser(data,obj);
			},
			saveUser(data,obj){
				uni.request({
					url: this.serverUrl + 'user-api/editUser',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: data,
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							uni.navigateTo({
								url: '../../my/claim-step2/claim-step2?author=' + obj.realName
							})
						} else {
							uni.showToast({
								title: r.errMsg
							});
						}
					},
					fail: (err) => {
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						})
					}
				})
			},			
		}
	}
</script>

<style>
	
.grace-list input{
	text-align: right;
}
.grace-list .placehol{
	color: #888888
}
.grace-list textarea{
	width:390px;
	height:45px;
}

.table-btn-view {
	/* position: fixed;
	bottom: 27upx; */
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
	
.table-btn-view .save-btn {
	margin-top: 10upx;
	width: 92%;
	height: 90upx;
	line-height: 90upx;
	background: rgba(0, 170, 255, 1);
	border-radius: 10upx;
	color: #FFFFFF;
}
	
</style>
